<template>
	<view class="tp-login-box tp-flex tp-flex-col tp-box-sizing">

		<view class="tp-pd-t-b-30"></view>

		<view class="tp-flex tp-login-welcome tp-flex-col tp-mg-t-b-50">
			<view class="fishlogo"><img src="/static/icon/fisheryLogo.png" /></view>
			<!-- <view class="tp-mg-t-05">欢迎登录</view> -->
		</view>

		<view
			class="tp-ipt tp-box-sizing tp-mg-t-b-20 tp-pd-t-b-15 tp-pd-l-r-30 tp-flex tp-flex-row tp-flex-j-l tp-flex-a-c">
			<view class="iconfont iconwode tp-mg-r-15"></view>
			<input type="text" placeholder-class="tp-plc" placeholder="请输入账号" v-model="email" />
		</view>
		<view
			class="tp-ipt tp-box-sizing tp-mg-t-b-20 tp-pd-t-b-15 tp-pd-l-r-30 tp-flex tp-flex-row tp-flex-j-l tp-flex-a-c">
			<view class="iconfont iconmima tp-mg-r-15"></view>
			<input type="text" placeholder-class="tp-plc" placeholder="请输入验证码!" v-model="password" password=true />
		</view>

		<!-- <view class="tp-remember-password tp-mg-b-20">
			<label class="tp-flex tp-flex-row tp-flex-j-l tp-flex-a-c tp-mg-l-25">
				<checkbox value="cb" checked="true" color="#000000" /> 记住密码
			</label>
		</view> -->
		<view class="btn">
			<!-- <button class="tp-btn-cancle tp-mg-t-50 cancel_btn">取消登录</button> -->
			<button class="tp-btn tp-mg-t-50" :loading="loading" @tap="doLoginSubmit">登 录</button>
		</view>
		<view class="tp-getpwd tp-mg-t-40 tp-flex tp-flex-row tp-flex-j-c tp-flex-a-c" @tap="doLoginCancel">取消登录</view>

	</view>
</template>

<script>
	// 
	import {
		mapState,
		mapMutations
	} from "vuex";
	// 
	export default {
		data() {
			return {
				disabled: true,
				loading: false,
				email: '',
				password: ''
			}
		},
		// 
		watch: {
			email() {
				this.onBtnChange();
			},
			password() {
				this.onBtnChange();
			}
		},
		methods: {
			//取消登录
			doLoginCancel() {
				uni.navigateBack(-1)
			},
			// 改变按钮状态
			onBtnChange() {
				if (this.email && this.password) {
					this.disabled = false;
					return;
				}
				this.disabled = true;
			},
			//登录
			doLoginSubmit: function() {
				let url = "/auth/login";
				let data = {
					login_type:'wechatmini',
					business_id:'92a00bb5-f28e-4849-baa5-f1edd85649e6',
					wx_code:uni.getStorageSync('wx_code'),
					iv:'',
					encryptedData:'',
					name:'',
				};
				this.loading = true;
				this.$H.post(url, data).then(res => {
					this.loading = false;
					// 修改vuex的state，持久化存储
					this.$store.commit('login', res);
					this.$store.dispatch('getUserInfo');
					uni.switchTab({
						url: '../fishery-monitor/fishery-monitor'
					});
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					//
				}).catch(err => {
					this.loading = false;
				});
				//
				return;
				//
			}
			//
		}
	}
</script>

<style>
	page {
		background: url();
		background-size: cover;
	}

	.fishlogo {
		width: 274rpx;
		height: 132rpx;
		margin: 0 auto;
		margin-top: 223rpx;
		margin-bottom: 165rpx;
		padding-top: 0rpx;
	}

	.fishlogo img {
		width: 274rpx;
		height: 132rpx;
	}

	.tp-login-box {
		width: 100%;
	}

	.tp-login-welcome {}

	.tp-login-welcome>view:first-child {
		font-size: 42rpx;
		font-weight: bold;
		color: #0F0F0F;
	}

	.tp-login-welcome>view:last-child {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.tp-login-box>.tp-ipt {
		width: 549rpx;
		margin: 0 auto;
		border-bottom: 1px solid #8E96AC;
		margin-bottom: 66rpx;
	}

	.tp-login-box>.tp-ipt>view.iconfont {
		font-size: 36rpx;
		color: #999999;
		font-weight: bold;
	}

	.tp-login-box>.tp-ipt>input {
		width: 100%;
		color: #666666;
	}

	.tp-remember-password {}

	.tp-remember-password>label {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.tp-remember-password>label>checkbox {
		transform: scale(0.6);
	}

	.btn {
		display: flex;
		justify-content: space-between;
		margin: 0 50rpx;
		margin-top: 149rpx;
	}

	.tp-btn {
		/* width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #343436;
		box-shadow: 0rpx 8rpx 31rpx 1rpx rgba(147, 147, 147, 0.35);
		border-radius: 44rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF; */
		width: 282rpx;
		height: 77rpx;
		background: #246FDD;
		box-shadow: 0px 8rpx 31rpx 1rpx rgba(147, 147, 147, 0.35);
		border-radius: 39rpx;
		line-height: 77rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;

	}

	.cancel_btn {
		width: 282rpx;
		height: 77rpx;
		line-height: 77rpx;
		background: #F2F2F2;
		border-radius: 8rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #246FDD;
		box-shadow: 0px 8rpx 31rpx 1rpx rgba(147, 147, 147, 0.35);
		margin-right: 27rpx;
		border-radius: 39rpx;
		border: none;
		margin: 0 auto;
	}

	.vc-btn-disabled {
		background: #888888;
	}

	.tp-getpwd {
		font-size: 26rpx;
		font-weight: 500;
		color: #9999999;
	}

	.tp-plc {
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
